<template>
    <div class="sousuo">
        <div style="padding-top:15px;overflow: hidden;">
            <div @click="lishi" style="cursor: pointer;padding:2px;float:left;background:#12a7b4;color:white;border-radius: 2px;">
                搜索历史
            </div>
            <button @click="sousuo" style="float:right;border:solid 1px #12a7b4;color: #12a7b4;">搜索</button>
        </div>
        <transition name="fade">
            <div v-show="sousuos" style="margin-top:20px;">
                <input @keyup="sss" v-model="info" style="width:100%;color:#12a7b4;border: solid 1px #12a7b4;height:30px" type="text" placeholder="游戏--厂家--帖子--用户">
            </div>
        </transition>
        <transition name="fade">
            <div v-show="suoli" style="margin-top:20px;">
                历史的记录
            </div>
        </transition>
        <div>
            <sticky  :check-sticky-support="false" :offset="46">
               <tab :line-width="1" v-model="index0">
                <tab-item :selected="demo4 === item" v-for="(item, index) in list4" @click="demo4 = item" :key="index">{{item}}{{cccc[index]}}</tab-item>
              </tab>
            </sticky>
            <transition name="fade">
              <div v-if="show1===list4[index0]" style="margin-top:6%">
                <p v-if="games.length <= 0">未查找哟</p>
                <ul v-else style="padding:0 0;" v-for="(item,index) in games">
                    <li style="list-style:none;">
                        <p style="float:left;width:22%">
                            <a :href="'#/game/'+item.gameid">
                                <img style="width:100%" :src="'http://192.168.13.196:2200/images/'+item.gameer_bimg[1]" alt="">
                            </a>
                        </p>
                        <div style="float:left;margin-left:3%;width:70%;">
                            <p style="margin-bottom:0">{{item.gamename}}</p>
                            <p style="color:#12a7b4">售价：{{item.gameprize}}</p>
                            <p>
                                <span style="padding:2px;border: solid 1px #12a7b4;margin-right:2%;border-radius: 5px;" v-for="(data,index) in item.gametype">
                                    {{item.gametype[index]}}
                                </span>
                            </p>
                        </div>
                         <divider>{{ index +1}}</divider>
                         <divider>{{ $t('Tap')}}</divider>
                    </li>
                </ul>
              </div>
            </transition>
            <transition name="fade">
              <div v-if="show2===list4[index0]">
                  <p v-if="userw.length <= 0">未查找哟</p>
                  <ul v-else style="padding:0 0;" v-for="(item,index) in userw">
                      <li style="list-style:none;">
                          <p style="float:left;width:22%">
                             <a :href="'#/game/'+item._id">
                                <img style="width:80%;border: solid 1px #aaa;border-radius: 50px;" :src="'http://192.168.13.196:2200/upload/'+item.avatar[1]" alt="">
                             </a>
                          </p>
                          <div style="float:left;margin-left:3%;width:50%;">
                              <p style="margin-top:3px">{{item.name}}</p>
                               <p style="color:#12a7b4">ID:{{item._id}}</p>
                          </div>
                          <div style="float:right;width:18%;margin-top:3.5%">
                              <button @click="guanzhu" :name="item._id" style="border:none;background:#12a7b4;color:white;box-shadow: -1px -1px 10px #aaa;">关注</button>
                          </div>
                      </li>
                  </ul>
              </div>
            </transition>
            <transition name="fade">
              <div v-if="show3===list4[index0]">
                  <p>暂时无厂商入住本站</p>
              </div>
            </transition>
            <transition name="fade">
              <div v-if="show4===list4[index0]">
                  <p v-if="article.length <= 0">未查找哟</p>
                  <ul v-else style="padding:0 0;" v-for="(item,index) in article">
                      <li style="list-style:none;">
                          <p style="margin-left:10px;margin-top:10px;">
                             <a :href="'#/geren/'+item.author._id">
                                <img style="width:10%;border: solid 1px #aaa;border-radius: 50px;" src="/static/9.png" alt="">
                             </a>
                             <span>
                                 {{item.author.name}}
                             </span>
                          </p>
                          <a :href="'#/reply/'+item._id">
                            <h4 style="margin-left:12px;margin-top:5px;font-size:15px;font-weight:800">{{item.title}}</h4>
                            <p style="margin-left:12px;margin-top:5px;font-size:14px;">{{item.content}}</p>
                          </a>
                          <p style="float:right;color:white;">
                              <span style="background:#12a7b4;padding:1px 5px">
                                  <i class="fa fa-low-vision">
                                      {{item.click_num}}
                                  </i>
                              </span>
                              <span style="background:#12a7b4;padding:1px 5px">
                                  <i class="fa fa-commenting-o">
                                      {{item.comment_num}}
                                  </i>
                              </span>
                          </p>
                      </li>
                  </ul>
              </div>
            </transition>
        </div>
    </div>
</template>
<script>
import { Tab, TabItem, Sticky, Divider } from "vux";
export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider
  },
  data() {
    return {
      num1: 0,
      sousuos: false,
      suoli: false,
      num: 0,
      info: "",
      games: "",
      userw: "",
      changsgang: "",
      article: "",
      list4: ["游戏", "用户", "厂商", "帖子"],
      demo4: "游戏",
      index0: 0,
      show1: "游戏",
      show2: "用户",
      show3: "厂商",
      show4: "帖子",
      cccc: []
    };
  },
  methods: {
    sousuo: function() {
      var numss = this.num1;
      this.num1++;
      // console.log(numss);
      if (numss % 2 == 0) {
        this.sousuos = true;
        numss = 2;
      } else {
        this.sousuos = false;
      }
    },
    lishi: function() {
      var num = this.num;
      this.num++;
      // console.log(numss);
      if (num % 2 == 0) {
        this.suoli = true;
        num = 2;
      } else {
        this.suoli = false;
      }
    },
    sss: function(ev) {
      console.log(this.info);
      var that = this;
      // console.log(ev.keyCode)
      if (ev.keyCode === 13) {
        this.$axios
          .post("/top/ggetinfo", {
            info: this.info
          })
          .then(data => {
            //   console.log(data.data.data[0].lenght)
            var datas = data.data.data;
            that.games = data.data.data.game;
            that.userw = data.data.data.user;
            that.article = data.data.data.article;
            that.cccc.push(
              that.games.length,
              that.userw.length,
              0,
              that.article.length
            );
            console.log(that.cccc);
          })
          .catch(err => {
            console.log(err);
          });
      }
      if (ev.keyCode === 8) {
        location.href = "#/sousuo";
      }
    },
    guanzhu: function(ev) {
      ev.preventDefault();
      var value = ev.currentTarget;
      console.log(value.name + "456456456");
    }
  }
};
</script>
<style scoped>
.fade-enter {
  opacity: 0;
  transform: translatex(-200px);
}

/* 显示/消失过程中的过渡样式 */

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-leave-to {
  opacity: 0;
  transform: translatex(200px);
}
.sousuo {
  margin: 78px 10px;
}
.fade-enter {
  opacity: 0;
  transform: translatex(-200px);
}

/* 显示/消失过程中的过渡样式 */

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

/* 定义标签离开之后的结束状态 */
a {
  overflow: hidden;
  /* border: solid 1px  */
  /* border-radius: 10px; */
  /* cursor: pointer; */
  /* border: solid 1px  */
}
.fade-leave-to {
  opacity: 0;
  transform: translatex(200px);
}
</style>
